import React, { Component } from 'react'
import store from "../store"


export default class ReduxPage extends Component {
  componentDidMount() {
    this.unsubscribe = store.subscribe(() => {
      this.forceUpdate()
    })
  }
  componentWillUnmount() {
    this.unsubscribe()
  }
  handAdd = () => {
    store.dispatch({
      type: "ADD"
    })
  }

  handAsyncAdd=()=>{
    // setTimeout(() => {
    //   store.dispatch({
    //     type: "ADD"
    //   })
    // }, 100);
    store.dispatch((dispatch, getState) => {
      setTimeout(() => {
        dispatch({ type: "ADD" });
      }, 1000);
    });
  }


  render() {
    return (
      <div>
        ReduxPage

        <h4>
          {store.getState().count}
        </h4>
        <button onClick={this.handAdd}>
          add
        </button>
        <button onClick={this.handAsyncAdd}>
          asyncAdd
        </button>
        <br/>
      </div>
    )
  }
}
